<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa cfff" :to="{
                    name:'home',
                    params:{city:this.nowCity}
                }">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                选择城市
            </h1>
        </header>
        <nav class="p20 cfff f20">
            <div class="ml30 mr30">
                <p class="f30 mb25">当前定位：</p>
                <div class="flex jcsb">
                    <p class="f25">{{ nowCity }}</p>
                    <a  @click="again" href="#" class="cfff">
                        <i class="el-icon-refresh-right cfff f30 mr5"></i>
                        <span class="f25">重新定位</span>
                    </a>
                </div>
            </div>
        </nav>
        <main class="p20">
            <section class="main-order bcfff mb20 f25">
                <div class="info oh">
                  <h2 class="mb15 f30 fn">热门城市</h2>
                  <div class="line" style="height:7rem"></div>
                    <ul @click="onHit" class="mt20 hotCity " v-for=" el in hotCityArr">
                        <li class="item" style="float: left;"> {{el}}</li>
                    </ul>
                </div>
            </section>
            <section class="bcfff mb20 f25" v-for=" el in arr">
                <ul @click="onHit" class="info "  >
                  <h2 class="mb30 f30 fn">{{el.initial}}</h2>
                  <li class="flex jcsb" v-for="item in el.cityNameList">
                    {{ item |format }}
                  </li>
                </ul>
            </section>
        </main>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    mounted(){
        axios({
            url:"static/city.json",
            methods:'get'
        }).then(r=>{
            // console.log(r.data);
            this.arr = r.data;
        })
    },
    filters:{
        format(val){
            if((val.indexOf('州') != -1 || val.indexOf('区') != -1) && val.length>3){
                return val;
            }else{
                return val+"市";
            }
        }
    },
    data(){
        return{
            arr:[],
            hotCityArr:[
                "北京市","南京市","武汉市","深圳市",
            ],
            nowCity:"郑州市",
        }
    },
    methods:{
        again(){
            this.nowCity = '郑州市'
        },
        onHit(e){
            if(e.target.tagName == 'LI'){
                this.obj.nowCity = e.target.innerText
            }
        }
    }
}
</script>
<style scoped>
/* section ul.hotCity {display: flex;flex-wrap: wrap;} */
section ul.hotCity li.item{background-color: #f7f7f7;color: #808080;padding: 20rem 60rem;font-size: 25rem;border-radius: 30rem;margin-bottom: 25rem;margin-right: 20rem;}
/* section ul.hotCity li{background-color: #f7f7f7;color: #808080;padding: 20rem 60rem;font-size: 25rem;border-radius: 30rem;margin-right: 45rem;margin-bottom: 25rem;} */
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.line{height: 1rem;background-color: #f7f7f7;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

nav {margin-top: -310rem;}
nav img{width: 35rem;height: auto;vertical-align: middle;}

/* 手机端必须加上这一句--体验感 */
main{margin-bottom: 20rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
section ul.info li{padding-bottom: 30rem;margin-bottom: 30rem;  border-bottom: 2rem solid #f7f7f7;}
section ul.info li:last-child{padding-bottom: 0;border-bottom: 0;margin-bottom: 0;}
</style>